<template>
  <div class="img_box">
    <div class="video_icon" v-if="props.content.type === 'video'" @click="dialogVisible = true">
      <el-icon color="white" :size="26"><CaretRight /></el-icon>
    </div>
    <img 
      :src="props.content.src"
      @click="props.content.type === 'video' && (dialogVisible = true)"
      :style="{
        cursor: props.content.type === 'video' ? 'pointer' : 'default'
      }"
      loading="lazy"
    >
  </div>
  <el-dialog v-model="dialogVisible" fullscreen>
    <video
      :src="props.content.video"
      controls
      width="100%"
      height="100%"
      autoplay
      :poster="props.content.src"
      v-if="dialogVisible"
    ></video>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { CaretRight } from '@element-plus/icons-vue';

const props = defineProps({
  content: {
    type: Object,
    required: true
  }
});

const dialogVisible = ref(false)
</script>
<style lang="scss">
.img_box {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
  position: relative;
  .video_icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba($color: #000000, $alpha: 0.2);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video_icon:hover {
    background-color: rgba($color: #000000, $alpha: 0.5);
    cursor: pointer;
  }
  img {
    width: 100%;
  }
}
.el-dialog {
  --el-dialog-bg-color: rgba(0, 0, 0, 0.2);
  .el-dialog__body {
    height: calc(100% - 16px);
  }
}
</style>